<template>
  <div style="display: flex;">
    <el-button type="primary" plain @click="add" :icon="addIcon">
      添加用户
    </el-button>
      <el-select v-model="findparams.roleId" 
                  placeholder="选择用户类型" 
                  style="width: 240px;
                  margin-left: 40px;"
                  @change="getTableData">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
    <el-form-item style="margin-left: 40vw;" label="用户搜索：">
      <div style="display: flex;">
        <el-input v-model="findparams.keyword" @input="getTableData"></el-input>
      </div>
    </el-form-item>
  </div>
  <el-table :data="tableData.records" style="width: 100% ;height: 77vh;">
    <el-table-column width="100">
      <template #default="scoped">
        <el-button text @click="drawerShow(scoped.row.id)">{{scoped.row.id}}</el-button>
      </template>
    </el-table-column>
    <el-table-column prop="name" label="姓名" width="auto" @click="drawerShow"/>
    <el-table-column prop="nickName" label="昵称" width="auto" />
    <el-table-column prop="phone" label="手机号" width="auto" />
    <el-table-column prop="email" label="邮箱" width="auto" />
    <el-table-column prop="state" label="账号管理" width="auto">
      <template #default="scoped">
        <el-button type="success" v-if="scoped.row.state === 0" @click="changeState(scoped.row.id,scoped.row.state)">禁用</el-button>
        <el-button type="danger" v-else @click="changeState(scoped.row.id,scoped.row.state)">启用</el-button>
      </template>
    </el-table-column>
    <el-table-column width="150">
      <template #default="scoped">
        <el-button plain type="primary" @click="update(scoped.row.id)">修改</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination 
    style="margin-top: 10px;" 
    background
    :page-count="tableData.pages"
    v-model:current-page="params.pageNo"
    @current-change="getTableData"
    :total="tableData.total">
  </el-pagination>
  <el-dialog 
      :model-value="dialog.show"
      :title="dialog.title"
      width="700px"
      :before-close="handleClose"
      :close-on-click-modal="false">
     <Add
      v-if="dialog.show"
      @getTableData="getTableData"
      v-model:show="dialog.show"
      :id="dialog.id"
     />
  </el-dialog>
  <el-drawer
  v-model="drawer.show"
  title="用户信息简介"
  direction="ltr"
  class="drawer"
  :beforeClose="handleClose">
    <Detail
    v-if="drawer.show"
    :id="drawer.id">
    </Detail>
  </el-drawer>
</template>

<script  setup>
import { _axios,request,get,post } from '@/plugins/axios' 
import { ref,reactive } from 'vue'
import Add from './add.vue'
import Detail from './detail.vue'
import { ElMessageBox } from 'element-plus'
import path from './path'
import addIcon from '@/components/icons/add.vue'
const options = ref([])
let tableData = ref({})
// 控制消息框是否可显示
const dialog = reactive({
  show:false,
  title:'',
  id:null
});
// 控制抽屉是否出现
const drawer = reactive({ 
  show: false,
  id:null
})
// 分页的数据，作为分页查询get的参数
const params = reactive({
  pageNo : 1,
  pageSize: 14
})
const findparams = reactive({
  roleId:null,
  keyword:null
})

// 页面渲染的时候先获取一次，初始化
getTableData()
// 获取数据
function getTableData(){
  if(findparams.keyword != null){
    params.keyword = findparams.keyword
  }
  if(findparams.roleId != null){
    params.roleId = findparams.roleId
  }
  get(findparams.keyword || findparams.roleId ? path.find : path.list,params,content => {
    console.dir(content)
    tableData.value = content
  })
}
getRole()
function getRole(){
  get('/role/arr',{},content => {
    options.value = content
    options.value.push({  
       value: null,  
       name: '全部类型',  
    });
  })
}
let changeState = (id,state) => {
  const text = state ? '确定要启用管理员么？' : '确定要禁用管理员么？'
  ElMessageBox.confirm(text,'警告',{
    type:'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消',
  }).then(()=>{
      post(path.fixState,{id,state},content =>{
        getTableData()
      })
  }).catch(()=>{})
   
}
function add(){
  dialog.title="添加管理员"
  dialog.id = null
  dialog.show = true
}
function update(id){
  dialog.title="修改管理员"
  dialog.id = id
  dialog.show = true
}
// 表单关闭事件
function handleClose(){
    // 将表单隐藏
    dialog.show = false
    drawer.show = false
} 
function drawerShow(id){
  drawer.show = true
  drawer.id = id
}
</script>

<style scoped lang='scss'>
</style>